<!--  -->
<template>
  <px-dialog v-model="visible" width="450px" draggable @close="closeDialog">
    <template #header="{ titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">温馨提示</h4>
    </template>
    当前页面未保存，跳转后内容将被清空，请先进行保存操作。
    <template #footer>
      <div v-if="hasDraft" class="dialog-footer">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="closeAndBack"> 不保存并返回 </px-button>
        <px-button type="primary" @click="draftAndBack"> 保存并返回 </px-button>
      </div>
      <div v-else class="dialog-footer">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="closeAndBack"> 取消修改并返回 </px-button>
        <px-button type="primary" @click="saveAndBack"> 确认修改并发布 </px-button>
      </div>
    </template>
  </px-dialog>
</template>
<script setup lang="ts">
const visible = defineModel("visible");
const props = defineProps({
  // 标题
  hasDraft: {
    type: Boolean,
    default: true,
    required: false
  }
});
const emits = defineEmits(["back", "draft", "save"]);

function closeDialog() {
  visible.value = false;
}
function closeAndBack() {
  closeDialog();
  emits("back");
}
function draftAndBack() {
  closeDialog();
  emits("draft");
}
function saveAndBack() {
  closeDialog();
  emits("save");
}
</script>
<style lang="scss" scoped>
.rule-detail-content {
  max-height: 700px;
}
</style>
